<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :model="listQuery" inline label-width="80px">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="listQuery.start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="listQuery.end_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="房间id">
              <el-input
                v-model="listQuery.room_id"
                clearable
                placeholder="请输入房间id"
              ></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="房间名称">
              <el-input
                clearable
                v-model="listQuery.room_name"
                placeholder="请输入房间名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称" label-width="120px">
              <el-input
                clearable
                v-model="listQuery.nickname"
                placeholder="请输入昵称"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户id">
              <el-input
                clearable
                v-model="listQuery.user_code"
                placeholder="请输入用户id"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="deBounceWrap(handleSearch)"
                icon="el-icon-search"
              >搜索
              </el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" prop="id" width="80"></el-table-column>
        <el-table-column
          label="房间id"
          prop="room_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="房间名"
          prop="room_name"
          width="140"
        ></el-table-column>
        <el-table-column
          label="麦位"
          prop="pit_number"
          width="75"
        ></el-table-column>
        <el-table-column
          label="用户id"
          prop="user_code"
          width="80"
        ></el-table-column>
        <el-table-column
          label="昵称"
          prop="nickname"
          width="120"
        ></el-table-column>
        <el-table-column
          label="风险评分"
          prop="score"
          width="60"
        ></el-table-column>
        <el-table-column
          label="风险类型"
          prop="risk_type"
          width="60"
        ></el-table-column>
        <el-table-column
          label="违规开始时间"
          prop="audio_starttime"
          width="180"
        ></el-table-column>
        <el-table-column
          label="违规结束时间"
          prop="audio_endtime"
          width="180"
        ></el-table-column>
        <el-table-column label="违规文本" prop="audio_text"></el-table-column>
        <el-table-column label="违规片段" prop="audio_url" width="220">
          <template slot-scope="{ row }">
            <audio :src="row.audio_url" controls></audio>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="add_time"
          width="180"
        ></el-table-column>
      </el-table>
      <cus-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getVoiceRoom"
      />
    </el-card>
  </div>
</template>
<script>
import {VoiceRoom} from "@/api/room/violationRecord";

export default {
  data() {
    return {
      listQuery: {
        start_time: undefined,
        end_time: undefined,
        room_id: undefined,
        room_name: undefined,
        user_code: undefined,
        nickname: undefined,
        page: 1,
        per_page: 10,
      },
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.getVoiceRoom();
  },
  methods: {
    getVoiceRoom() {
      let data = {};
      for (let key in this.listQuery) {
        if (this.listQuery[key]) {
          data[key] = this.listQuery[key];
        }
      }
      VoiceRoom(data).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
        //  this.listQuery.per_page = res.data.per_page
      });
    },
    handleSearch() {
      if (this.listQuery.start_time > this.listQuery.end_time) {
        this.$message({
          message: "请输入正确的时间",
          type: "warning",
        });
        return;
      }
      this.listQuery.page = 1;
      this.getVoiceRoom();
    },
  },
};
</script>
<style scoped>
</style>

